<template>
  <!-- 职务管理 -->
  <div
  :class="{'innerPageTable-box-OneTwo': !useTableSearchBar}"
  class="JobManage-page innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form
        :model="searchForm"
        ref="jobSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>  
          <!-- 职务编码 -->
          <Form-item prop="code" :label="$t('module.job.jobCode')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.code"
              :placeholder="$t('module.job.warning.enterJobCode')"
              
              @on-enter="search"
            ></Input>
          </Form-item>
          
          <!-- 职务名称 -->
          <Form-item prop="name" :label="$t('module.job.jobName')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.name"
              :placeholder="$t('module.job.warning.enterJobName')"
              
              @on-enter="search"
            ></Input>
          </Form-item>
        
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">  
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="reset" />
          </Form-item> 
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="jobTable" :config="tableConfig"> 
      <!-- table bar 添加-->
      <div slot="table-bar">
        <div class="operate-wrapper">
          <RPButton optType="create" @click="add" />
          <!-- <CommonImportExport :configs="importExportConfigs"></CommonImportExport> -->
        </div>
      </div>
      <Form
        :model="searchForm"
        v-if="useTableSearchBar"
        ref="jobSearchForm"
        slot="table-search-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>  
          <!-- 职务编码 -->
          <Form-item prop="code">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.code"
              :placeholder="$t('module.job.warning.enterJobCode')"
              clearable
              @on-blur="search"
              @on-clear="search"
              @on-enter="search"
            ></Input>
          </Form-item>
          
          <!-- 职务名称 -->
          <Form-item prop="name">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.name"
              :placeholder="$t('module.job.warning.enterJobName')"
              clearable
              @on-blur="search"
              @on-clear="search"
              @on-enter="search"
            ></Input>
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import jobAPI from "@/api/jobAPI.js";
import { jobColumns } from "./columns.js";
import JobEdit from "./JobEdit.vue";
import locales from "./locales.js";
import { CoreModuleName } from "@/const.js";
import CommonImportExport from '@/components/import-and-export/index.vue'

export default {
  name: "job-manage",
  mixins: [locales],
  data() {
    return {
      searchForm: {
        tenantCode: "",
        name: "",
        code: ""
      }
    };
  },
  components: {
    CommonImportExport
  },
  computed: {
    tableConfig() {
      return { loadDataFn: this.queryJobList, columnsFn: jobColumns.bind(this), autoFirst: false };
    },
    importExportConfigs() {
      const apiPrefix = window?.RPConfig?.mgt || ''
      const queryTemplateParams = {
        requestPath: `${apiPrefix}/template/list`,
        requestMethod: 'post',
        requestParams: {
          templateCategory: 'JOB'
        }
      }
      return [
        {
          type: 'import', // 类型
          requestPath: `${apiPrefix}/job/importExcel`, // 上传接口地址
          successCallback: this.reset // 上传成功回调
        },
        {
          type: 'export', // 类型
          btnText: '导出', // 按钮文字
          requestPath: `${apiPrefix}/job/exportExcel`, // 请求方式
          requestMethod: 'post', // 请求方式
          requestParams: {
            ...this.searchForm
          }
        },
        {
          type: 'export',
          btnText: '下载职务模板',
          exportType: 'downloadTemplate',
          requestPath: `${apiPrefix}/job/exportExcelMode`,
          requestMethod: 'post',
          requestParams: {
            attributeId: ''
          },
          queryTemplateParams
        }
      ]
    }
  },
  created: function() {
    this.init();
  },
  mounted() {
    this.search();
  },
  methods: {
    init() {
      let { userInfo } = this.$store.state[CoreModuleName];
      if (!userInfo) return;

      // 根据当前租户查询数据
      this.searchForm.tenantCode = userInfo.tenantCode;
    },
    // 初始化职务类型
    search(page = 1) {
      this.$refs["jobTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["jobSearchForm"].resetFields();
      this.search(1);
    },
    edit(row) {
      new this.$pageModal(
        JobEdit,
        {
          props: {
            tenantCode: this.searchForm.tenantCode,
            jobId: row.id,
            detailData:row
          }
        },
        data => {
          data && this.search(this.$refs.jobTable.param.pageNum);
        }
      );
    },
    add() {
      new this.$pageModal(
        JobEdit,
        {
          props: {
            tenantCode: this.searchForm.tenantCode
          }
        },
        data => {
          data && this.search();
        }
      );
    },
    // 获取职务列表数据
    queryJobList({ responseProcess, param }) {
      jobAPI.queryJobList(param).then(data => {
        responseProcess(data);
      });
    }
  }
};
</script>
<style lang="less">
.JobManage-page {
  .ivu-table {
    .ivu-table-fixed-right {
      .ivu-table-fixed-body {
        .ivu-table-tbody {
          tr {
            .ivu-table-cell {
              width: 109px !important;
            }
          }
        }
      }
    }
  }
}
</style>

